<template>
  <div class="createPost-container">
    <el-dialog title="发布文章" v-model="dialogVisible" @close="closeDialog">
      <el-form :model="form">
        <el-form-item label="文章标题:" :label-width="formLabelWidth">
          <el-input v-model="form.articleTitle" autocomplete="off" />
        </el-form-item>
        <el-form-item label="文章内容:" :label-width="formLabelWidth">
          <el-input v-model="articleContent" type="textarea" disabled :rows="2" placeholder="文章内容" />
        </el-form-item>
        <el-form-item label-width="120px" label="发布方式:" class="postInfo-container-item">
          <el-radio-group v-model="form.articleType">
            <el-radio label="NEWS">新闻</el-radio>
            <el-radio label="ANNOUNCE">公告</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeDialog">取 消</el-button>
          <el-button
              type="primary"
              @click="publishArticle"
          >发布</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {createArticle} from "@/api/multimedia";

export default {
  name: 'publishForm',
  props: ['title','content','dialogFormVisible'],
  data() {
    return {
      dialogVisible: false,
      articleContent:'',
      form: {
        userId:'',
        articleTitle: '',
        articleContent: '',
        articleType: "NEWS",
      },
      formLabelWidth: '120px',
    }
  },
  created() {
  },
   watch: {
     dialogFormVisible(newVal) {
       this.dialogVisible = newVal
       this.form.articleTitle=this.title
       this.form.articleContent=this.content
       this.articleContent=this.content
       if (this.content.length > 20) { this.articleContent = this.content.substring(0, 20) + '...' }
     },
   /*  title(newVal) {
       this.form.articleTitle = newVal
       },
     content(newVal){
       this.form.articleContent = newVal
       // console.log(newVal)
       this.articleContent=newVal
       // console.log(this.articleContent)
       if (newVal.length > 20) { this.articleContent = this.articleContent.substring(0, 20) + '...' }
     }*/
   },

  methods: {
    // 关闭对话框，调用父类方法
    closeDialog() {
      this.$emit('closeFormDialog')
    },
    closeThisDialog() {
      this.$emit('closeChildDialog')
    },
    // 文章发布
    publishArticle() {
      this.form.userId=this.$store.state.user.userId
      console.log(this.form)
        createArticle(this.form).then(()=>{
          this.closeThisDialog()
        }).catch(()=>{
          this.closeThisDialog()
        })
      }
    }
}
</script>

<style lang="scss" scoped>
.box-center {
  margin: 0 auto;
  display: table;
}

.text-muted {
  color: #777;
}

.user-profile {
  .user-name {
    font-weight: bold;
  }

  .box-center {
    padding-top: 10px;
  }

  .user-role {
    padding-top: 10px;
    font-weight: 400;
    font-size: 14px;
  }

  .box-social {
    padding-top: 30px;

    .el-table {
      border-top: 1px solid #dfe6ec;
    }
  }

  .user-follow {
    padding-top: 20px;
  }
}

.user-bio {
  margin-top: 20px;
  color: #606266;

  span {
    padding-left: 4px;
  }

  .user-bio-section {
    font-size: 14px;
    padding: 15px 0;

    .user-bio-section-header {
      border-bottom: 1px solid #dfe6ec;
      padding-bottom: 10px;
      margin-bottom: 10px;
      font-weight: bold;
    }
  }
}
</style>
